<template>
  <div class="overall-overview">
    <div class="header">
      <span>扫码指标数据概况</span>
      <div class="time-filter">
        <div class="left-text">当前时间</div>
        <div class="vertical-line"></div>
        <el-date-picker
          v-model="currentDate"
          type="daterange"
          range-separator="—"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <div class="clock"></div>
      </div>
      <div class="time-filter">
        <div class="left-text">对照时间</div>
        <div class="vertical-line"></div>
        <el-date-picker
          v-model="compareDate"
          type="daterange"
          range-separator="—"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <div class="clock"></div>
      </div>
    </div>
    <div class="middle-chart">
      <div class="visit-times">
        <div
          class="visit-times-item"
          v-for="(item, index) in visitData"
          :key="index"
        >
          <div class="item-title">
            <div
              :style="{
                backgroundColor: item.color,
                width: '10px',
                height: '13px',
              }"
            ></div>
            <span>{{ item.name }}</span>
          </div>
          <div class="item-num">
            <div class="current">
              <div class="currentTitle">当前：</div>
              <div class="num">{{ item.num }}</div>
              <span>{{ item.unit }}</span>
            </div>
            <div class="current">
              <div class="compareTitle">对照：</div>
              <div class="num">{{ item.compareNum }}</div>
              <span>{{ item.unit }}</span>
            </div>
          </div>
          <div class="item-compare">
            <div>
              较对照周期
              <span
                :style="{
                  color:
                    item.percentage.slice(0, 1) == '0'
                      ? '#8896ac'
                      : item.percentage.slice(0, 1) == '-'
                      ? '#00AA13'
                      : '#EC2F17',
                }"
                ><span>{{
                  item.percentage.slice(0, 1) == "-" ||
                  item.percentage.slice(0, 1) == "0"
                    ? ""
                    : "+"
                }}</span
                >{{ item.percentage }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <div class="visit-way">
        <div class="title">
          <div class="color-box"></div>
          <span>扫码访问方式分布</span>
          <!-- <div class="choose-way">
            <el-button round>访问人数</el-button>
            <el-button round>打开次数</el-button>
          </div> -->
        </div>
        <div class="chart-box">
          <RoseChart
            v-if="dataList"
            :typeAnalysisData="dataList"
            :color="color"
            :labelShow="false"
            :radius="radius"
            :center="center"
            :text="text"
            :subtext="subtext"
            width="40%"
            height="210px"
            legendLeft="right"
            legendTop="middle"
          ></RoseChart>
          <div class="right-text">
            <div
              class="text-item"
              v-for="(item, index) in dataList"
              :key="index"
            >
              <div class="text-title">
                <div
                  class="color-box"
                  :style="{ backgroundColor: color[index] }"
                ></div>
                <span>{{ item.name }}</span>
              </div>
              <div class="item-value">{{ item.value }}%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="header">
      <span>扫码 - 场景访问数据趋势</span>
    </div>
    <div class="visit-trending">
      <div class="header-filter">
        <div class="time-filter">
          <span>统计时间</span>
          <el-date-picker
            v-model="currentDateForVisitTrending"
            type="daterange"
            range-separator="—"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
        <div class="time-filter">
          <span>指标筛选</span>
          <el-select v-model="filterItem" placeholder="请选择">
            <el-option
              v-for="item in visitData"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="chart-box" v-if="xData">
        <LineChart
          v-if="xData"
          :xData="xData"
          :yData="yData"
          :height="chartHeight < 400 ? 400 : chartHeight"
          :currentTag="currentTag"
          :currentTagName="currentTagName"
        ></LineChart>
      </div>
    </div>
  </div>
</template>

<script>
import LineChart from "./LineChart.vue";
import RoseChart from "./RoseChart.vue";
import {
  getEventPageIntervalList,
  getEventPageTrendList,
  getEventStatCompareList,
} from "@/api/index";

export default {
  components: {
    LineChart,
    RoseChart,
  },
  props: {
    selectDate: {
      type: Array,
      default: [],
    },
    compareDateParent: {
      type: Array,
      default: [],
    },
    projectName: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      currentTagName: "",
      currentDate: "",
      compareDate: "",
      currentDateForVisitTrending: "",
      visitData: [
        {
          color: "#3589FF",
          name: "扫码访问人数",
          num: "0",
          percentage: "61.62%",
          unit: "人",
          value: "visitorNum",
          compareNum: "0",
        },
        {
          color: "#26C689",
          name: "扫码访问次数",
          num: "0",
          percentage: "61.62%",
          unit: "次",
          value: "shareOpenNum",
          compareNum: "0",
        },
        {
          color: "#735AFF",
          name: "扫码打开次数",
          num: "0",
          percentage: "-61.62%",
          unit: "次",
          value: "scanopenNum",
          compareNum: "0",
        },
        // {
        //   color: "#FFA158",
        //   name: "打开次数占比",
        //   num: "15%",
        //   percentage: "0%",
        //   unit: "",
        //   value: 40,
        // },
      ],
      yData: [1],
      xData: ["1"],
      currentTag: "visitPersonNumber",
      chartHeight: window.innerHeight - 750,
      filterItem: 10, //指标筛选的值
      // 饼状图
      dataList: [
        { value: 0, name: "线下扫码访问人数占比" },

        { value: 0, name: "长按识别访问人数占比" },
      ],
      color: ["#6115FF", "#1AC99D"],
      radius: ["50%", "85%"],
      center: ["50%", "50%"],
      text: "0%",
      subtext: "线下扫码",
    };
  },
  created() {
    this.currentDate = this.selectDate;
    this.compareDate = this.compareDateParent;
    this.currentDateForVisitTrending = this.selectDate;
    this.filterItem = this.visitData[0].value;
  },
  watch: {
    currentDateForVisitTrending: {
      handler(val) {
        this.getEventPageTrendListFn();
      },
    },
    currentDate: {
      handler(val) {
        this.getEventPageIntervalListFn();
        this.getEventStatCompareListFn();
      },
    },
    selectDate: {
      handler(val) {
        this.updateTime();
        this.getEventPageIntervalListFn();
      },
    },
    projectName: {
      handler(val) {
        this.getEventPageIntervalListFn();
        this.getEventPageTrendListFn();
        this.getEventStatCompareListFn();
      },
    },
    compareDate: {
      handler(val) {
        this.getEventPageIntervalListFn();
      },
    },
    filterItem: {
      handler(val) {
        switch (val) {
          case "shareOpenNum":
            this.currentTagName = "扫码访问次数";
            break;
          case "visitorNum":
            this.currentTagName = "扫码访问人数";
            break;
          case "scanopenNum":
            this.currentTagName = "扫码打开次数";
            break;
          default:
            break;
        }
        this.currentTag = val;
        this.getEventPageTrendListFn();
      },
    },
  },
  mounted() {},
  methods: {
    updateTime() {
      this.currentDate = this.selectDate;
      this.compareDate = this.selectDate;
      this.currentDateForVisitTrending = this.selectDate;
    },
    async getEventPageIntervalListFn() {
      const params = {
        cardType: this.projectName[0],
        currentStartTime: this.currentDate[0] + " 00:00:00",
        currentEndTime: this.currentDate[1] + " 23:59:59",
        compareStartTime: this.compareDate[0] + " 00:00:00",
        compareEndTime: this.compareDate[1] + " 23:59:59",
        // pageId: this.projectName[1],
        // etIdList: [this.projectName[2]],
        etIdList: [10004, 10005],
      };
      const res = await getEventPageIntervalList(params);
      if (res.code == 200) {
        res.data.forEach((item) => {
          switch (item.dataKey) {
            // 打开次数
            case "shareOpenNum":
              this.visitData[1].num = item.currentDataValue;
              this.visitData[1].compareNum = item.compareDataValue;
              this.visitData[1].percentage = item.percentage;

              this.visitData[2].num = item.currentDataValue;
              this.visitData[2].compareNum = item.compareDataValue;
              this.visitData[2].percentage = item.percentage;

              break;
            // 访问人数
            case "visitorNum":
              this.visitData[0].num = item.currentDataValue;
              this.visitData[0].compareNum = item.compareDataValue;
              this.visitData[0].percentage = item.percentage;
              break;
            default:
              break;
          }
        });
      }
    },
    async getEventPageTrendListFn() {
      const params = {
        cardType: this.projectName[0],
        currentStartTime: this.currentDateForVisitTrending[0] + " 00:00:00",
        currentEndTime: this.currentDateForVisitTrending[1] + " 23:59:59",
        etIdList: [10004, 10005],
        // pageId: this.projectName[1],
        //查询字段 totalPersonNum : 总共人数 openNum : 打开次数  shareNum ：分享次数  visitorNum ：浏览次数 newUsersNum ：新增用户数  stayTime：停留时间
        searchColumn:
          this.filterItem == "scanopenNum" ? "shareOpenNum" : this.filterItem,
      };
      const res = await getEventPageTrendList(params);
      if (res.code == 200) {
        let tempxData = [];
        let tempyData = [];
        res.data.forEach((item) => {
          item.statTime = item.statTime.slice(0, 10);
          tempxData.push(item.statTime);
          tempyData.push(Number(item.dataValue));
        });

        this.$nextTick(() => {
          this.xData = tempxData;
          this.yData = tempyData;
        });
        console.log("this.xData", this.xData, this.yData);
      }
    },
    async getEventStatCompareListFn() {
      const params = {
        cardType: this.projectName[0],
        currentStartTime: this.currentDate[0] + " 00:00:00",
        currentEndTime: this.currentDate[1] + " 23:59:59",
        etIdList: [10004, 10005],
        searchColumn: "visitorNum",
      };
      const res = await getEventStatCompareList(params);
      if (res.code == 200) {
        console.log("res", res);
        if (res.data.length > 0) {
          let text =
            (100 * Number(res.data[0].dataValue)) /
            (Number(res.data[0].dataValue) + Number(res.data[1].dataValue));
          this.text = String(text.toFixed(0)) + "%";
          this.dataList[0].value = Number(String(text.toFixed(0)));
          this.dataList[1].value = 100 - this.dataList[0].value;
        } else {
          // 没数据的情况置0
          this.text = "0%";
          this.dataList[0].value = 0;
          this.dataList[1].value = 0;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.overall-overview {
  .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    span {
      height: 22px;
      font-family: PingFang-SC;
      font-weight: 800;
      font-size: 20px;
      color: #222222;
      line-height: 22px;
    }
    .time-filter {
      width: 350px;
      margin-left: 22px;
      position: relative;
      height: 36px;
      background-color: #ffffff;
      /* box-shadow: 0px 2px 8px 0px rgba(141, 155, 185, 0.3); */
      border-radius: 6px;
      padding: 7px 10px;
      box-sizing: border-box;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #000000;
      line-height: 22px;
      display: flex;
      flex-direction: row;
      align-items: center;
      .vertical-line {
        width: 1px;
        height: 11px;
        border: 1px solid #cacaca;
        margin-left: 12px;
      }
      .date-icon {
        position: absolute;
        right: 8px;
        top: 8px;
      }
      .clock {
        width: 17px;
        height: 16px;
        background: url("../../../../assets/images/clock@2x.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 15px;
      }
      /deep/ .el-range-editor.el-input__inner {
        border: none;
        height: 36px;
      }
    }
  }
  .middle-chart {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 19px;
    .visit-times {
      width: 50%;
      border-radius: 8px;
      padding: 12px 13px;
      box-sizing: border-box;
      margin-top: 17px;
      background: #ffffff;
      display: grid;
      /* grid-template-columns: repeat(auto-fill, minmax(287px, 1fr)); */
      grid-template-columns: 1fr 1fr;
      grid-column-gap: 12px;
      grid-row-gap: 12px;
      margin-bottom: 17px;
      .visit-times-item {
        height: 130px;
        background: #f6f7f8;
        border-radius: 4px;
        padding: 19px 16px;
        box-sizing: border-box;
        .item-title {
          display: flex;
          flex-direction: row;
          align-items: center;

          span {
            margin-left: 9px;
            color: #555555;
            font-weight: 400;
          }
        }
        .item-num {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          margin-top: 10px;
          .current {
            display: flex;
            flex-direction: row;
            align-items: center;
          }
          .num {
            font-size: 24px;
            color: #222222;
            font-weight: 800;
          }
          .currentTitle {
            color: #555555;
          }
          .compareTitle {
            color: #555555;
          }
          span {
            color: #8896ac;
            margin-left: 10px;
            font-size: 12px;
          }
        }
        .item-compare {
          margin-top: 14px;
          font-weight: 200;
          font-size: 15px;
          div {
            color: #8896ac;
          }
          span {
            font-size: 15px;
            font-weight: 600;
          }
        }
      }
    }
    .visit-way {
      width: 50%;
      height: 296px;
      border-radius: 8px;
      padding: 32px 28px;
      box-sizing: border-box;
      margin-top: 17px;
      margin-bottom: 17px;
      margin-left: 12px;
      background: #ffffff;
      .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        .color-box {
          width: 10px;
          height: 13px;
          background: #26c689;
          border-radius: 2px;
        }
        span {
          margin-left: 13px;
          color: #555555;
          font-weight: 800;
        }
        .choose-way {
          margin-left: 24px;
          /deep/ .el-button:active,
          .el-button:focus {
            background: #e5e4ea;
            border-color: #e5e4ea;
            color: #222222;
          }
        }
      }
      .chart-box {
        display: flex;
        flex-direction: row;
        .right-text {
          margin-left: 50px;
          .text-item {
            margin-top: 30px;
            .text-title {
              display: flex;
              flex-direction: row;
              align-items: center;
              span {
                margin-left: 8px;
                font-size: 16px;
                color: #555555;
              }
              .color-box {
                width: 8px;
                height: 8px;
                border-radius: 50%;
              }
            }
            .item-value {
              font-size: 30px;
              color: #4b4b4b;
              font-family: D-DIN-PRO-800-ExtraBold;
              font-weight: 400;
              margin-top: 23px;
            }
          }
        }
      }
    }
  }

  .visit-trending {
    width: 100%;
    border-radius: 8px;
    padding: 24px;
    box-sizing: border-box;
    margin-top: 17px;
    background: #ffffff;
    .header-filter {
      display: flex;
      flex-direction: row;
      .time-filter {
        margin-right: 22px;
        span {
          margin-right: 10px;
        }
        /deep/ .el-date-editor--daterange.el-input__inner {
          background: #fafbfe;
        }
        /deep/ .el-range-editor .el-range-input {
          background: #fafbfe;
        }
        /deep/ .el-range-editor.el-input__inner {
          border: 1px solid #e9e9e9;
          height: 36px;
        }
        /deep/ .el-input--suffix .el-input__inner {
          height: 36px;
          background: #fafbfe;
        }
        /deep/ .el-date-editor .el-range-separator{
          line-height: 28px;
        }
      }
    }
    .chart-box {
      margin-top: 32px;
    }
  }

  /deep/ .el-date-editor .el-range-separator {
    width: 10%;
    /* line-height: 28px; */
  }
  /deep/ .el-date-editor .el-range__icon {
    display: none;
  }
  /deep/ .el-date-editor--daterange.el-input__inner {
    width: 250px;
  }
}
</style>
